<template>
	<view class="msg_con">
		<view class="section">
			<view class="list" v-for="(val,index) in 3" :key="index" >
				<view class="box" :class="{borderNone:index === 2}">
					<view class="icon">
						<image src="/static/images/msgIcon.png"></image>
					</view>
					<view class="info">
						<view class="up space">
							<view class="left">平台消息</view>
							<view class="right">6天前</view>
						</view>
						<view class="donw space">
							<view class="left">认真结果通知</view>
							<view class="count">2</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: ''
		}
	},
	onLoad() {},
	methods: {}
}
</script>

<style lang="scss" scoped>
.msg_con{
	width:100%;
	height:100%;
	position: absolute;
	overflow: scroll;
	background: #F8F8F8;
	padding: 30rpx;
	.section{
		background: #FFFFFF;
		border-radius: 18rpx;
		.list{
			padding:0rpx 30rpx;
			
			.box{
				border-bottom: 1rpx solid #E4E4E4;
				display: flex;
				align-items: center;
				padding: 40rpx 0;
				.icon{
					width:100rpx;
					height:100rpx;
					margin-right: 40rpx;
					image{
						width:100%;
						height:100%;
					}
				}
				.info{
					flex: 1;
					.space{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.count{
							font-weight: 400;
							font-size: 26rpx;
							color: #FFFFFF;
							background: #FE6406;
							width:35rpx;
							height:35rpx;
							line-height: 35rpx;
							text-align: center;
							border-radius: 35rpx;
						}
					}
					.up{
						margin-bottom: 20rpx;
						.left{
							font-weight: 600;
							font-size: 30rpx;
							color: #000000;
						}
						.right{
							font-weight: 400;
							font-size: 26rpx;
							color: #999999;
						}
					}
					.down{
						.left{
							font-weight: 400;
							font-size: 26rpx;
							color: #999999;
						}
						
					}
				}
			}
			.borderNone{
				border:none;
			}
		}
		
	}
}
</style>
